import React, { Component } from 'react';
import { Chart, Geom, Axis, Tooltip, Coord, Label, Legend } from 'bizcharts';
import DataSet from '@antv/data-set';
import {getPie} from "../../../../api/chart"
import {Loading} from '@icedesign/base';
const { DataView } = DataSet;


export default class PieChart extends Component {

  constructor(props) {
    super(props)
    this.state = {
      dataSource: [],
    }
    console.log(this.props)
  }

  componentWillMount() {
    // let pa = getPie({});
    // console.log(pa)
    // this.setState({
    //   pa:pa
    // })
    this.LoadDeviceData()

  }



  LoadDeviceData() {
    let data = [];
    this.props.pa.then(res => {
      if (res.data.status == 200) {
        data = res.data.data
        // let result = []
        // console.log(data)
        const dataSource = data.map(item => {
          return { // 必要格式
            item: item.ORG2_NAME,
            count: item.count
          };
        });
        this.setState({
          dataSource,
        });

        // return data
      } else {
        alert("/api/getPie 接口出错")
      }
      // console.log(data)

    }).catch(err => {
      console.log(err)
      alert("/api/getPie 接口出错" + err)
    });

    // this.props.updateBindingData('RecvDevice');
  }


  render() {
    // console.log(this.state.pa);

    const dv = new DataView();
    dv.source(this.state.dataSource).transform({
      type: 'percent',
      field: 'count',
      dimension: 'item',
      as: 'percent',
    });
    const cols = {
      percent: {
        formatter: (val) => {
          val = `${val.toFixed(2) * 100}%`; // 百分比 保留两位小数
          return val;
        },
      },
    };
    return (

      <div>
        <Chart height={800} data={dv} scale={cols} padding={[10]} forceFit>
          <Coord type="theta" radius={0.5} />
          <Axis name="percent" />
          <Legend position="top" offsetY={160} offsetX={1} />
          <Tooltip
            showTitle={false}
            itemTpl="<li><span style=&quot;background-color:{color};&quot; class=&quot;g2-tooltip-marker&quot;></span>{name}: {value}</li>"
          />
          <Geom
            type="intervalStack"
            position="percent"
            color="item"
            tooltip={[
              'item*percent',
              (item, percent) => {
                percent = `${percent * 100}%`;
                return {
                  name: item,
                  value: percent,
                };
              },
            ]}
            style={{
              lineWidth: 1,
              stroke: '#fff',
            }}
          >
            <Label
              content="percent"
              offset={-40}
              textStyle={{
                rotate: 0,
                textAlign: 'center',
                shadowBlur: 2,
                shadowColor: 'rgba(0, 0, 0, .45)',
              }}
            />
          </Geom>
        </Chart>
      </div>

    );
  }
}
